<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大美江西 - 诗画赣鄱</title>
    <!-- 引入外部依赖 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'mountain-green': '#2D6A4F',     // 青山绿
                        'porcelain-white': '#F5F5F5',   // 瓷都白
                        'culture-red': '#BC3C29',       // 文化红
                        'river-blue': '#3D5A80',        // 河流蓝
                        'earth-brown': '#5C4033',       // 土地棕
                        'lake-blue': '#2A9D8F',         // 湖泊蓝（鄱阳湖）
                        'pagoda-yellow': '#E9C46A',     // 楼阁黄（滕王阁）
                    },
                    fontFamily: {
                        'calligraphy': ['"Ma Shan Zheng"', 'cursive'],
                        'sans': ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .bg-blur {
                backdrop-filter: blur(4px);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: scale(1.03);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            .nav-scrolled {
                @apply bg-white shadow-md py-2;
            }
            .page-content {
                display: none;
                animation: fadeIn 0.5s ease-in-out;
            }
            .page-content.active {
                display: block;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
    <!-- 引入谷歌字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-porcelain-white font-sans text-earth-brown">
    <!-- 顶部导航栏（空结构） -->
    <nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 py-4">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center">
                <!-- 网站标志 -->
                <a href="#" class="flex items-center page-link" data-page="home">
                    <i class="fa fa-pagelines text-mountain-green text-2xl mr-2"></i>
                    <span class="font-calligraphy text-xl md:text-2xl text-white text-shadow">江西旅游</span>
                </a>
                
                <!-- 桌面导航菜单 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="nav-link text-white hover:text-mountain-green transition-colors font-medium page-link" data-page="home">首页</a>
                    <a href="#" class="nav-link text-white hover:text-mountain-green transition-colors font-medium page-link" data-page="categories">江西必去景点</a>
                    <a href="#" class="nav-link text-white hover:text-mountain-green transition-colors font-medium page-link" data-page="travel-tips">旅游贴士</a>
                    <a href="#" class="nav-link text-white hover:text-mountain-green transition-colors font-medium page-link" data-page="contact">联系我们</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-btn" class="md:hidden text-white text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单（隐藏状态） -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute top-full left-0 right-0">
            <div class="px-4 py-3 space-y-3">
                <a href="#" class="block py-2 text-earth-brown hover:text-mountain-green transition-colors page-link" data-page="home">首页</a>
                <a href="#" class="block py-2 text-earth-brown hover:text-mountain-green transition-colors page-link" data-page="categories">江西必去景点</a>
                <a href="#" class="block py-2 text-earth-brown hover:text-mountain-green transition-colors page-link" data-page="travel-tips">旅游贴士</a>
                <a href="#" class="block py-2 text-earth-brown hover:text-mountain-green transition-colors page-link" data-page="contact">联系我们</a>
            </div>
        </div>
    </nav>

    <!-- 页面容器（包含所有页面内容区域） -->
    <div class="min-h-screen flex flex-col pt-16"> <!-- 为导航栏留空间 -->
        <!-- 首页内容（默认显示） -->
        <div id="home" class="page-content active flex-grow">
            <!-- 后续将填充首页内容 -->
        </div>

        <!-- 江西必去景点页面（隐藏） -->
        <div id="categories" class="page-content flex-grow py-16 px-4">
            <!-- 后续将填充景点内容 -->
        </div>
        
        <!-- 旅游贴士页面（隐藏） -->
        <section id="travel-tips" class="page-content py-16 px-4 bg-gray-50">
            <!-- 后续将填充贴士内容 -->
        </section>
        
        <!-- 联系我们页面（隐藏） -->
        <section id="contact" class="page-content py-16 px-4 bg-white">
            <!-- 后续将填充联系内容 -->
        </section>
        
        <!-- 返回顶部按钮（隐藏） -->
        <button id="back-to-top" class="fixed right-6 bottom-6 bg-mountain-green text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-mountain-green/90 z-50">
            <i class="fa fa-chevron-up"></i>
        </button>
        
        <!-- 页脚 -->
        <footer class="bg-earth-brown text-white py-10 px-4">
            <div class="max-w-7xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-xl font-bold mb-4 font-calligraphy">江西旅游</h3>
                        <p class="text-gray-300 mb-4">
                            探索江西的自然美景与人文底蕴，体验独特的赣鄱文化。
                        </p>
                        <div class="flex space-x-4">
                            <a href="#" class="text-white hover:text-mountain-green transition-colors">
                                <i class="fa fa-weibo text-xl"></i>
                            </a>
                            <a href="#" class="text-white hover:text-mountain-green transition-colors">
                                <i class="fa fa-wechat text-xl"></i>
                            </a>
                            <a href="#" class="text-white hover:text-mountain-green transition-colors">
                                <i class="fa fa-instagram text-xl"></i>
                            </a>
                            <a href="#" class="text-white hover:text-mountain-green transition-colors">
                                <i class="fa fa-youtube-play text-xl"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">快速链接</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">景点门票</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">旅游线路</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">酒店预订</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">交通指南</a></li>
                            <li><a href="#" class="text-gray-300 hover:text-white transition-colors">旅游攻略</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">联系我们</h3>
                        <ul class="space-y-2 text-gray-300">
                            <li class="flex items-start">
                                <i class="fa fa-map-marker mt-1 mr-3"></i>
                                <span>江西省赣州市南康区1958号</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-phone mr-3"></i>
                                <span>400-888-8888</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-envelope mr-3"></i>
                                <span>info@jiangxitravel.com</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                    <p>© 2023 江西旅游网 版权所有 | 赣ICP备XXXXXXXX号</p>
                </div>
            </div>
        </footer>
    </div>

    <!-- 基础JS（后续逐步完善） -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 后续将添加交互逻辑
        });
    </script>
</body>
</html>